<template>
	<div class="musicPlay">
		<ul class="ul-one">

			<li @click="return_"><img src="../images/inon.png" /></li>
			<li>
				<p>{{this.$store.state.songtitle}}</p>
				<p>{{this.$store.state.songautro}}</p>
			</li>
			<li class="yuan"><img src="../images/DO.png" /></li>
			<li class="yuan"><img src="../images/share.png" /></li>
			<li class="yuan popin"><img src="../images/sandian.png" /></li>
		</ul>
		<ul class="ul-two">
			<li class="liTone">
				<div class="lidiv">
					<img :src="this.$store.state.songPicBig" />
				</div>
				<div class="circle1 lidiv"></div>
				<div class="circle2 lidiv"></div>
				<div class="circle3 lidiv"></div>
				<div class="circle4 lidiv"></div>
				<div class="circle5 lidiv"></div>
			</li>
			<li class="liTtwo">

				<p>亲···非常抱歉！</p>
				<p>暂时没有歌词哦！</p>
			</li>
		</ul>
		<!--进度条-->
		<div class="bar">
			<div class="jindutiao">
				<div class="hongtiao">
					<div class="heiyuan"></div>
				</div>
			</div>
			<div class="jieshu">
				<p>{{timeText}}</p>
			</div>
			<div class="kaishi">
				<p></p>
			</div>
		</div>

		<ul class="ul-foot">
			<li @click="swtichT"><img :src="ImgT" /></li>
			<li @click="ontop"><img src="../images/shang.png" /></li>
			<li @click="swtich">
				<img :src="Img" />
			</li>
			<li @click="next1" class="next6"><img src="../images/xia.png" /></li>
			<li @click="bostyle"><img :src="ImgD" /></li>
		</ul>
	</div>

</template>

<script>
	import $ from "jquery";
	import jsonp from "jsonp";
	export default {
		name: "musicPlay",
		data() {
			return {
				Img: "../images/stop.png",
				ImgT: "../images/aixin.png",
				ImgD: "../images/danqu.png",
				curIndex: this.$store.state.songids,
				//				times: "",
				timeText: "00:00",
			}
		},
		methods: {
			//			$(".bar .hongtiao").css("width","")
			bostyle() {
				this.ImgD = this.ImgD == "../images/danqu.png" ? "../images/suiji.png" : "../images/danqu.png";
			},
			swtichT: function() {
				this.ImgT = this.ImgT == "../images/aixin.png" ? "../images/hongaixin.png" : "../images/aixin.png";
			},
			swtich: function() {
				var music = document.querySelector(".audi");
				if(music.paused) {
					music.play();
					$(".lidiv").css("animation-play-state", "running");

				} else {
					music.pause();
					$(".lidiv").css("animation-play-state", "paused");
				};
				this.Img = this.Img == "../images/stop.png" ? "../images/play.png" : "../images/stop.png";
			},
			return_() {
				this.$router.push("/");
			},
			ontop() {
				var next = this.curIndex - 1;
				var index2 = this.$store.state.songids;
				var lilengs = this.$store.state.sontlieng;
				var song = this.$store.state.song;
				//				console.log(this.$store.state.songList);
				var playId = this.$store.state.songList[next].song_id;
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + playId, null, (err, res) => {
					if(err) {

					} else {
						this.$store.commit("changeSong", res.bitrate.file_link);
						this.$store.commit("changeSongname", res.songinfo.title);
						this.$store.commit("changeSongautro", res.songinfo.author);
						this.$store.commit("changeSongpic", res.songinfo.pic_small);
						this.$store.commit("changeSongpicbig", res.songinfo.pic_small);
						this.$store.commit("changeSongsj", res.songinfo.file_duration);
					}
				})
				this.curIndex = next;
			},
			next1() {
				var next = parseInt(this.curIndex + 1);
				var lilengs = this.$store.state.sontlieng;
				var song = this.$store.state.song;
				console.log(this.$store.state.songList);
				var playId = this.$store.state.songList[next].song_id;
				console.log(next);
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + playId, null, (err, res) => {
					if(err) {

					} else {
						this.$store.commit("changeSong", res.bitrate.file_link);
						this.$store.commit("changeSongname", res.songinfo.title);
						this.$store.commit("changeSongautro", res.songinfo.author);
						this.$store.commit("changeSongpic", res.songinfo.pic_small);
						this.$store.commit("changeSongpicbig", res.songinfo.pic_small);
					}
				})
				this.curIndex = next;
			}

		},
		mounted() {
			var ulT = document.querySelector(".ul-two");
			var lidiv = document.querySelectorAll(".liTone div");
			var liTone = document.querySelector(".liTone");
			var liTtwo = document.querySelector(".liTtwo");
			var plls = document.querySelector(".popin");
			liTtwo.addEventListener("click", function() {
				this.classList.toggle("Heigh");
				liTone.classList.toggle("_hidden");
			});
			plls.addEventListener("click", function() {
				this.style.transform = "rotate(90deg)"
			});

		},
		computed: {
			time() {
				return this.$store.state.shijian;
			}
		},
		watch: {
			time() {
				let time = this.$store.state.shijian;
				if(time) {
					this.timeText = Math.floor(time / 60) + ":" + (time % 60);
				}
				var curT = 0;
				$("audio").on("timeupdate", function() {
					curT = Math.round(this.currentTime);
					var a = curT / time;
					$(".hongtiao").css("transform", "translateX(" + (1 - a) * (-100) + "%)");
					
					
					var t = Math.floor(curT / 60)
					var r = curT % 60
					if(t<10){
						t = "0"+t
					}
					if(r<10){
						r = "0"+r
					}
					var m = t+":"+r
					
//					var b = "0"+Math.floor(curT / 60) + ":" +(curT % 60);
					$(".kaishi").text(m);
				})


			}
		},
		created() {
			let time = this.$store.state.shijian;
			if(time) {
				this.timeText = Math.floor(time / 60) + ":" + (time % 60);
			}
		},
	}
</script>

<style scoped="scoped" lang="scss">
	@import "../scss/utils.scss";
	.Heigh {
		height: 80%;
	}
	
	._hidden {
		display: none;
	}
	
	.musicPlay {
		width: 100%;
		height: 100%;
		.bar {
			width: 90%;
			height: 3%;
			margin: 0 auto;
			margin-top: 13%;
			position: relative;
			.kaishi {
				width: 12%;
				height: 75%;
				position: absolute;
				left: 0;
				bottom: -2px;
				border-radius: 5px;
				/*background: greenyellow;*/
				text-align: center;
				font-size: 9px;
				color: greenyellow;
			}
			.jieshu {
				width: 12%;
				height: 75%;
				position: absolute;
				right: 0;
				bottom: -2px;
				border-radius: 5px;
				/*background: greenyellow;*/
				text-align: center;
				font-size: 9px;
				color: greenyellow;
			}
			.jindutiao {
				width: 100%;
				height: 15%;
				overflow: hidden;
				background: #807d6b;
				>div {
					width: 100%;
					height: 100%;
					background: #ff5c45;
					position: relative;
					transform: translateX(-100%);
					>div {
						width: 5px;
						height: 5px;
						border-radius: 50%;
						background: white;
						position: absolute;
						z-index: 99999;
						right: 0;
						bottom: 50%;
						transform: translateY(50%);
					}
				}
			}
		}
		.ul-one {
			position: relative;
			height: 10%;
			li {
				display: inline-block;
				position: absolute;
				top: 16%;
			}
			.yuan {
				width: 35px;
				height: 35px;
				border: 1px solid #999998;
				border-radius: 50%;
				img {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			li:first-child {
				width: 5.6%;
				height: 24%;
				position: absolute;
				top: 27%;
				left: 5%;
				img {
					width: 100%;
				}
			}
			li:nth-child(2) {
				position: absolute;
				top: 16%;
				left: 13%;
				p:first-child {
					font-size: 16px;
				}
				p:last-child {
					margin-top: 2%;
					font-size: 10px;
					color: #919698;
				}
			}
			li:nth-child(3) {
				right: 29%;
				img {
					width: 92%;
				}
			}
			li:nth-child(4) {
				right: 16%;
				img {
					height: 50%;
				}
			}
			li:last-child {
				right: 3.1%;
				img {
					height: 50%;
				}
			}
		}
		.ul-two {
			height: 62%;
			position: relative;
			.lidiv {
				animation: rotating 10s linear .3s infinite;
			}
			@keyframes rotating {
				0% {
					transform: rotate(0deg);
				}
				;
				100% {
					transform: rotate(360deg);
				}
			}
			li:first-child {
				width: 240px;
				height: 240px;
				background: #76766c;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 19%;
				transform: translateX(-50%);
				transition: all .5s;
				div:first-child {
					width: 220px;
					height: 220px;
					border-radius: 50%;
					position: absolute;
					overflow: hidden;
					top: -9999px;
					bottom: -9999px;
					left: -9999px;
					right: -9999px;
					margin: auto;
					img {
						position: absolute;
						width: 100%;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
					/*@include aImg;*/
				}
			}
			li:last-child {
				width: 100%;
				overflow: hidden;
				font-size: 14px;
				position: absolute;
				bottom: 4%;
				text-align: center;
			}
			.circle1 {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				border: 1px solid #cb7cc8;
				width: 265px;
				height: 265px;
				animation: circle1 3s infinite reverse linear;
				@-webkit-keyframes circle1 {
					0% {
						-webkit-transform: translate(-50%, -50%);
					}
					25% {
						-webkit-transform: translate(-51%, -49%);
					}
					50% {
						-webkit-transform: translate(-52%, -50%);
					}
					75% {
						-webkit-transform: translate(-51%, -51%);
					}
					100% {
						-webkit-transform: translate(-50%, -50%);
					}
				}
			}
			.circle2 {
				position: absolute;
				top: 50%;
				left: 49%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				border: 1px solid #dda8da;
				width: 245px;
				height: 245px;
				animation: circle2 3s infinite reverse linear;
				@-webkit-keyframes circle2 {
					0% {
						-webkit-transform: translate(-50%, -49%);
					}
					25% {
						-webkit-transform: translate(-51%, -48%);
					}
					50% {
						-webkit-transform: translate(-52%, -49%);
					}
					75% {
						-webkit-transform: translate(-51%, -50%);
					}
					100% {
						-webkit-transform: translate(-50%, -49%);
					}
				}
			}
			.circle3 {
				position: absolute;
				top: 50%;
				left: 49%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				border: 1px solid #bc51b5;
				width: 260px;
				height: 260px;
				animation: circle3 3s infinite reverse linear;
				@-webkit-keyframes circle3 {
					0% {
						-webkit-transform: translate(-50%, -49%);
					}
					25% {
						-webkit-transform: translate(-49%, -48%);
					}
					50% {
						-webkit-transform: translate(-48%, -49%);
					}
					75% {
						-webkit-transform: translate(-49%, -48%);
					}
					100% {
						-webkit-transform: translate(-50%, -49%);
					}
				}
			}
			.circle4 {
				position: absolute;
				top: 50%;
				left: 51%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				border: 1px solid #cd7cc7;
				width: 280px;
				height: 280px;
				animation: circle4 3s infinite reverse linear;
				@-webkit-keyframes circle4 {
					0% {
						-webkit-transform: translate(-50%, -50%);
					}
					25% {
						-webkit-transform: translate(-51%, -49%);
					}
					50% {
						-webkit-transform: translate(-52%, -50%);
					}
					75% {
						-webkit-transform: translate(-51%, -51%);
					}
					100% {
						-webkit-transform: translate(-50%, -50%);
					}
				}
			}
			.circle5 {
				position: absolute;
				top: 48%;
				left: 48%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				border: 1px solid #bf51b1;
				width: 300px;
				height: 300px;
				animation: circle5 3s infinite reverse linear;
				@-webkit-keyframes circle5 {
					0% {
						-webkit-transform: translate(-48%, -48%);
					}
					25% {
						-webkit-transform: translate(-47%, -47%);
					}
					50% {
						-webkit-transform: translate(-46%, -48%);
					}
					75% {
						-webkit-transform: translate(-47%, -49%);
					}
					100% {
						-webkit-transform: translate(-48%, -48%);
					}
				}
			}
		}
		.ul-foot {
			width: 90%;
			@include Xjuz;
			bottom: 5%;
			height: 10%;
			overflow: hidden;
			li {
				display: inline-block;
				right: 0;
				@include middle;
			}
			li:first-child {
				width: 5%;
				height: 23%;
				left: 3%;
				@include middle;
				img {
					width: 100%;
					height: 100%;
				}
			}
			li:nth-child(3) {
				width: 50px;
				height: 50px;
				@include Middll;
				@include amg;
				img {
					width: 35%;
				}
			}
			>li:nth-child(2) {
				width: 35px;
				height: 35px;
				left: 20%;
				border: 1px solid #807d6b;
				border-radius: 50%;
				@include middle;
				@include amg;
				img {
					width: 40%;
				}
			}
			>li:nth-child(4) {
				width: 35px;
				height: 35px;
				right: 20%;
				border: 1px solid #807d6b;
				border-radius: 50%;
				@include middle;
				@include amg;
				img {
					width: 40%;
				}
			}
			li:last-child {
				width: 5.3%;
				height: 18.3%;
				right: 3%;
				position: absolute;
				top: 45%;
				transform: translateY(-45%);
				img {
					width: 100%;
				}
			}
		}
	}
</style>